@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

/* ---------- Base + resets ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

*::selection { background: #fd5d8d; color: #270245; }
*::-moz-selection { background: #fd5d8d; color: #270245; }

html, body { width: 100%; height: 100%; }

:root{
  --scale: min(1.1vw, 1.1vh);
  --bg-blue: #2b52ff;
  --fg: #fff;
  --flicker-dur: 1s; /* unified flicker speed */
}

body {
  position: relative;
  background: #000;
  color: var(--fg);
  overflow: hidden;
}
body:before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
  z-index: 500;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Noise & scanlines ---------- */
.noise {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100%;
  overflow: hidden; z-index: 400; opacity: .8;
  pointer-events: none;
}
.noise:before {
  content: "";
  position: absolute; inset: 0;
  background: url("https://ice-creme.de/images/background-noise.png");
  pointer-events: none;
}
.noise-moving { opacity: 1; z-index: 450; }
.noise-moving:before { animation: noise 1s infinite alternate; will-change: background-position; }

.scanlines {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100%;
  pointer-events: none; z-index: 300; opacity: .6;
  animation: opacity 3s linear infinite; will-change: opacity;
}
.scanlines:before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.5) 51%);
  background-size: 100% 4px;
  animation: scanlines .2s linear infinite;
  will-change: background, background-size;
}

/* ---------- Intro / hero ---------- */
.intro-wrap {
  position: fixed; inset: 0;
  width: 100vw; min-height: 100svh;
  background: var(--bg-blue);
  font-family: "Press Start 2P", monospace;
  color: var(--fg);

  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  justify-items: start;
  gap: clamp(8px, 2.2vmin, 28px);
  padding: clamp(12px, 2.4vmin, 28px);
}

/* Titles / dynamic text */
.play {
  font-size: clamp(28px, calc(28px + 4 * var(--scale)), 72px);
  animation: rgbText var(--flicker-dur) steps(9) infinite alternate;
  will-change: text-shadow;
}
.play .char {
  animation: type 1.2s infinite alternate;
  animation-delay: calc(60ms * var(--char-index));
  will-change: opacity;
}

.time {
  margin-left: auto;
  justify-self: end;
  font-size: clamp(18px, calc(18px + 2.5 * var(--scale)), 36px);
  animation: rgbText var(--flicker-dur) steps(9) infinite alternate;
  will-change: text-shadow;
}

.recordSpeed {
  align-self: end;
  font-size: clamp(12px, calc(12px + 1.25 * var(--scale)), 18px);
  animation: rgbText var(--flicker-dur) steps(9) infinite alternate;
  will-change: text-shadow;
}

/* ---------- Nav: responsive cluster of links ---------- */
nav[aria-label="Featured projects"] {
  display: grid;
  gap: clamp(6px, 1.6vmin, 16px);
  margin-top: clamp(8px, 2vmin, 20px);
}

nav[aria-label="Featured projects"] > div {
  font-size: clamp(14px, calc(14px + 1.6 * var(--scale)), 22px);
}

/* Make legacy absolute classes become flow items */
.intro-wrap .literary,
.intro-wrap .storm,
.intro-wrap .pixle,
.intro-wrap .birdle,
.intro-wrap .tapper,
.intro-wrap .dome,
.intro-wrap .pong,
.intro-wrap .theremin,
.intro-wrap .pendulum,
.intro-wrap .rick,
.intro-wrap .headliner,
.intro-wrap .gallery,
.intro-wrap .audiosync,
.intro-wrap .chromo,
.intro-wrap .stereograms,
.intro-wrap .blockbuster,
.intro-wrap .r2,
.intro-wrap .games,
.intro-wrap .back-home {
  position: static;
  animation: rgbText var(--flicker-dur) steps(9) infinite alternate;
  will-change: text-shadow;
}

/* Orientation tweaks */
@media (orientation: landscape) {
  .intro-wrap {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr auto;
  }
  .play { grid-column: 1 / 2; }
  .time { grid-column: 2 / 3; }
}

@media (orientation: portrait) {
  .intro-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
  }
  .time { justify-self: end; }
}

/* ---------- Links ---------- */
a { color: #fff; text-decoration: none; }
a:hover { color: hotpink; text-decoration: underline; }
a:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; }

/* Make featured badge sit nicely next to link text */
nav[aria-label="Featured projects"] a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

/* ---------- Featured sticker ---------- */
.featured-sticker{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ff2ea6;
  color: #0b0612;
  font: 700 10px/1 "Press Start 2P", system-ui, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  transform: rotate(-10deg) translateY(-1px);
  box-shadow: 0 6px 0 rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.85);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ---------- LP bottom-center ---------- */
#lpClock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, 2.4vmin, 28px);
  text-align: center;
  z-index: 600;
}

/* ---------- Cookie banner (dark) ---------- */
#cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0;
  width: 100%; background: #111; color: #f1f1f1;
  padding: 12px 16px; border-top: 2px solid #333; z-index: 1000;
  display: none;
}
#cookie-banner p { margin: 0 0 10px 0; font-size: 16px; color: #ddd; }
#cookie-banner a { color: #8fd1ff; text-decoration: underline; }
#cookie-banner a:hover { text-decoration: none; }
#cookie-banner button { border-radius: 8px; }

/* ---------- Animations ---------- */
@keyframes noise {
  0%,100% { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: 20% 25%; }
  50% { background-position: -25% 10%; }
  60% { background-position: 15% 5%; }
  70% { background-position: 0 15%; }
  80% { background-position: 25% 35%; }
  90% { background-position: -10% 10%; }
}
@keyframes opacity {
  0% { opacity: .6; }
  20% { opacity: .3; }
  35% { opacity: .5; }
  50% { opacity: .8; }
  60% { opacity: .4; }
  80% { opacity: .7; }
  100% { opacity: .6; }
}
@keyframes scanlines {
  from {
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.5) 51%);
    background-size: 100% 4px;
  }
  to {
    background: linear-gradient(to bottom, rgba(0,0,0,.5) 50%, transparent 51%);
    background-size: 100% 4px;
  }
}
@keyframes rgbText {
  0%   { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), 0 0 1px rgba(251,0,231,.8), 0 0 3px rgba(0,233,235,.8), 0 0 3px rgba(0,242,14,.8), 0 0 3px rgba(244,45,0,.8), 0 0 3px rgba(59,0,226,.8); }
  25%  { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), 0 0 1px rgba(251,0,231,.8), 0 0 3px rgba(0,233,235,.8), 0 0 3px rgba(0,242,14,.8), 0 0 3px rgba(244,45,0,.8), 0 0 3px rgba(59,0,226,.8); }
  45%  { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), 5px 0 1px rgba(251,0,231,.8), 0 5px 1px rgba(0,233,235,.8), -5px 0 1px rgba(0,242,14,.8), 0 -5px 1px rgba(244,45,0,.8), 5px 0 1px rgba(59,0,226,.8); }
  50%  { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), -5px 0 1px rgba(251,0,231,.8), 0 -5px 1px rgba(0,233,235,.8), 5px 0 1px rgba(0,242,14,.8), 0 5px 1px rgba(244,45,0,.8), -5px 0 1px rgba(59,0,226,.8); }
  55%  { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), 0 0 3px rgba(251,0,231,.8), 0 0 3px rgba(0,233,235,.8), 0 0 3px rgba(0,242,14,.8), 0 0 3px rgba(244,45,0,.8), 0 0 3px rgba(59,0,226,.8); }
  90%  { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), -5px 0 1px rgba(251,0,231,.8), 0 5px 1px rgba(0,233,235,.8), 5px 0 1px rgba(0,242,14,.8), 0 -5px 1px rgba(244,45,0,.8), 5px 0 1px rgba(59,0,226,.8); }
  100% { text-shadow: -1px 1px 8px rgba(255,255,255,.6), 1px -1px 8px rgba(255,255,235,.7), 5px 0 1px rgba(251,0,231,.8), 0 -5px 1px rgba(0,233,235,.8), -5px 0 1px rgba(0,242,14,.8), 0 5px 1px rgba(244,45,0,.8), -5px 0 1px rgba(59,0,226,.8); }
}
@keyframes type {
  0%, 19% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

/* Perfect phase sync (pause by default) */
.play,
.time,
.recordSpeed,
.intro-wrap .literary,
.intro-wrap .storm,
.intro-wrap .pixle,
.intro-wrap .birdle,
.intro-wrap .tapper,
.intro-wrap .dome,
.intro-wrap .pong,
.intro-wrap .theremin,
.intro-wrap .pendulum,
.intro-wrap .rick,
.intro-wrap .gallery,
.intro-wrap .headliner,
.intro-wrap .audiosync,
.intro-wrap .chromo,
.intro-wrap .stereograms,
.intro-wrap .blockbuster,
.intro-wrap .r2,
.intro-wrap .games,
.intro-wrap .back-home {
  animation-play-state: paused;
}
.sync-flicker .play,
.sync-flicker .time,
.sync-flicker .pixle,
.sync-flicker .recordSpeed,
.sync-flicker .intro-wrap .literary,
.sync-flicker .intro-wrap .storm,
.sync-flicker .intro-wrap .birdle,
.sync-flicker .intro-wrap .tapper,
.sync-flicker .intro-wrap .dome,
.sync-flicker .intro-wrap .pong,
.sync-flicker .intro-wrap .theremin,
.sync-flicker .intro-wrap .pendulum,
.sync-flicker .intro-wrap .rick,
.sync-flicker .intro-wrap .gallery,
.sync-flicker .intro-wrap .headliner,
.sync-flicker .intro-wrap .audiosync,
.sync-flicker .intro-wrap .chromo,
.sync-flicker .intro-wrap .stereograms,
.sync-flicker .intro-wrap .blockbuster,
.sync-flicker .intro-wrap .r2,
.sync-flicker .intro-wrap .games,
.sync-flicker .intro-wrap .back-home {
  animation-play-state: running;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .play,
  .time,
  .recordSpeed,
  .intro-wrap .literary,
  .intro-wrap .storm,
  .intro-wrap .pixle,
  .intro-wrap .birdle,
  .intro-wrap .tapper,
  .intro-wrap .dome,
  .intro-wrap .pong,
  .intro-wrap .theremin,
  .intro-wrap .pendulum,
  .intro-wrap .rick,
  .intro-wrap .gallery,
  .intro-wrap .headliner,
  .intro-wrap .audiosync,
  .intro-wrap .chromo,
  .intro-wrap .stereograms,
  .intro-wrap .blockbuster,
  .intro-wrap .r2,
  .intro-wrap .games,
  .intro-wrap .back-home {
    animation: none !important;
    text-shadow: none !important;
  }
}

.credit-creme{
  position: fixed;
  right: clamp(10px, 2vmin, 20px);
  bottom: clamp(10px, 2vmin, 20px);
  z-index: 650;            /* above scanlines/noise, below cookie banner */
  font: 700 12px/1 "Press Start 2P", system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
  opacity: .75;
  transform: translateZ(0); /* crisp on some GPUs */
  pointer-events: auto;
}

/* hover/focus affordances */
.credit-creme:hover,
.credit-creme:focus-visible{
  opacity: 1;
  text-decoration: underline;
  outline: none;
}

/* Show on desktop/landscape; hide on small portrait */
@media (orientation: portrait), (max-width: 720px){
  .credit-creme{ display: none; }
}

/* ---------- Preview popover / modal ---------- */
.preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vmin, 32px);
}

/* Ensure [hidden] actually hides overlay */
.preview-overlay[hidden] {
  display: none !important;
}

.preview-dialog {
  max-width: 640px;
  width: 100%;
  background: #050816;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 16px;
  padding: 16px;
  font-family: "Press Start 2P", system-ui, sans-serif;
}

.preview-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-media img,
.preview-media video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #000;
}

.preview-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
}

.preview-content h2 {
  font-size: 14px;
  margin: 0;
}

.preview-content p {
  margin: 0;
}

.preview-actions {
  margin-top: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-confirm {
  background: #16a34a;
  color: #fff;
}

.btn-cancel {
  background: #b91c1c;
  color: #fff;
}

.btn:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 2px;
}

/* When modal open, prevent scroll leaking */
body.has-modal {
  overflow: hidden;
}

/* Small screens: stack popover */
@media (max-width: 640px) {
  .preview-dialog {
    grid-template-columns: 1fr;
  }
}